<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/css/public.css" media="all" />

	<link rel="stylesheet" href="/layui/css/formSelects-v4.css">
	<script src="/layui/layui.js"></script>
	<script src="/js/jquery.min.js"></script>
	<script type="text/javascript" src="/layui/layui.js"></script>

	<script src="/js/config.js"></script>
</head>
<body class="childrenBody">

<form class="layui-form">
	<blockquote class="layui-elem-quote quoteBox">

		<div class="layui-inline">
			<div class="layui-input-inline">
				<input type="text"  id="username"  autocomplete="off" class="layui-input searchVal" placeholder="请输入搜索的内容" />
			</div>
			<!--<div class="layui-inline">-->
				<!--<label class="layui-form-label">用户角色</label>-->
				<!--<div class="layui-input-inline" style="width: 300px;">-->
					<!--<select name="hello"	 id="roles">-->
						<!--<option value="-1">请选择</option>-->
					<!--</select>-->
				<!--</div>-->
			<!--</div>-->
			<button type="button" class="layui-btn" onclick="reloadData()" lay-submit="" lay-filter="demo1"><i class="layui-icon layui-icon-search"></i> 查询</button>
		</div>


	</blockquote>
</form>
<table class="layui-hide" lay-filter="userTable" id="userList"></table>



<script>
    var table ,select;
    function reloadData(){
        var roleids = layui.formSelects.value('roles','val');
        //执行重载
        layui.table.reload('userList', {
            page:{
                curr:1
            },
            where:{
                username : $("#username").val(),
                "roleids" : roleids.join(",")
            }
        });
    }

    layui.config({
        base: '/layui/'
    }).extend({
        formSelects: 'formSelects-v4'
    });
    layui.use(['form','table','formSelects','laytpl'], function() {
        var form = layui.form;
        table = layui.table;
        select = layui.formSelects;
        var laytpl = layui.laytpl;
        form.render();


            table.render({
                elem: '#userList'
                , url: 'http://localhost:8888/user/list'
                , page: true
                , even: true
                , id: "userList",
                toolbar: '#toolbarDemo'
                , cols: [[
                    {type: 'checkbox'},
                    {field: 'userid', title: '用户编号', sort: true}
                    , {field: 'username', title: '用户名'}
                    , {field: 'createtime', title: '创建时间'}
                    , {field: 'birthdate', title: '生日'}
                    , {field: 'departments', title: '科目', templet: function (d){
                            if (d.departments.length == 0) {
                                return "-";
                            }
                            let str = "";
                            for (let hisrole of d.departments) {
                                str += hisrole.deName;
                            }
                            return str;



						}}
                    , {field: 'hisroles', title: '所属角色', templet: function (d) {
                            if (d.hisroles.length == 0) {
                                return "-";
                            }
                            let str = "";
                            for (let hisrole of d.hisroles) {
                                str += hisrole.roleName + " | " + hisrole.rolelabel;
                            }
                            return str;
                        }
                    },
                    {toolbar: '#barDemo'}
                ]]
            })

        //监听行内的工具条
        table.on('tool(userTable)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    layer.close(index);
                    $.post("http://localhost:8888/user/delete", {userid: data.userid}, function (d) {
                        table.reload("userTable", {
                            page: {
                                curr: 1
                            }
                        });
                    });
                });
            } else if (layEvent === 'edit') {//TODO 编辑
                $.get('add.html', function (s) {
                    layer.open({
                        type: 1,
                        title: '修改用户',
                        area: '800px',
                        content: s,
                        btn: ['确定', '取消'],
                        success: function () {
                            //对表单回填数据
                            data.locked = data.locked == 0 ? null : data.locked;
                            form.val('userForm', data);
                            var u =setInterval(function () {
								console.log("waiting...");
								if ($("#de_add option").length > 1){
								    var ce=$("#de_add");
								    ce.val(data.id);
								    layui.form.render();
								    clearInterval(u);
								}
                            })

                            var rids = [];
                            for (let role of data.hisroles) {
                                rids.push(role.roleid);
                            }
                            var t = setInterval(function () {
                                console.log("waiting....");
                                if ($("#roles_add option").length > 1) {
                                    select.value('roles2', rids);
                                    clearInterval(t);
                                }
                            },100)

                        },
                        yes: function () {
                            var str = $("#add_user_form").serialize();
                            $.post(`${new Config().base_url}/user/update`,str,function (data){
                                layer.close(layer.index);
                                table.reload('userList');

                            })
                        }
                    })
                })
            } else if (layEvent === 'detail') { //TODO 查看详情

            }
        });
        //头工具栏事件
        table.on('toolbar(userTable)', function (obj) {

            switch (obj.event) {
                case 'batchDelete': //批量删除
                    break;
                case 'add':
                    $.get("add.html", function (data) {
                        layer.open({
                            type: 1,
                            title: '添加用户',
                            skin: 'layui-layer-molv',
                            anim: 0,
                            area: '800px',
                            maxmin: true,
                            content: data,
                            btn: ['确定', '取消'],
                            yes: function () {
                                var str = $("#add_user_form").serialize();
                                $.post(`${new Config().base_url}/user/add`,str, function (data) {
                                    layer.close(layer.index);
                                    table.reload('userList');
                                });
                            }
                        })

                    });
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
            }

        });

        $.get("http://localhost:8888/role/search",function (data) {
            $.each(data,function(){
                var opt = $("<option></option>").appendTo("#roles");
                opt.text(this.roleName).val(this.roleid);
            });
            select.render();
        });
        $.get("http://localhost:8888/Department/search",function(data){
            $.each(data,function(){
                var opt = $("<option></option>").appendTo("#de_add");
                opt.text(this.deName).val(this.id);
            });
            layui.form.render()
        });
    });

</script>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">

		<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
		<button class="layui-btn layui-btn-sm" lay-event="batchDelete"><i class="layui-icon layui-icon-add-circle"></i> 批量删除</button>
	</div>
</script>
<script type="text/html" id="barDemo">
	<a href="javascript:void(0)" lay-event="detail"><i class="layui-icon layui-icon-app"></i></a>
	<a lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
	<a href="javascript:void(0)" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
</script>
</body>
</html>